<template>
  <div class="main-container">
    <el-container style="min-height: 100vh">
      <!-- 侧边导航栏 -->
      <el-aside :width="layoutIsCollapse ? '64px':'200px'" class="sidebar">
        <div v-show="!layoutIsCollapse" class="my-aside-head">
          <img class="logo" src="../assets/logo.png" alt="">
          综合市场管理
        </div>
        <div v-show="layoutIsCollapse" class="my-aside-head">
          <div>
            <img src="../assets/logo.png" alt="">
          </div>
        </div>
        <!--树形菜单-->
        <el-menu
            class="el-menu-vertical"
            :collapse="layoutIsCollapse"
            :unique-opened="true"
            :collapse-transition="false"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :router="true"
            @open="handleOpen"
            @close="handleClose"
            :default-active="$route.path"
        >
          <el-menu-item index="/index">
            <el-icon><House /></el-icon>
            <span>工作台</span>
          </el-menu-item>
          <el-sub-menu index="1" v-has-perm="'communitys111'">
            <template #title>
              <el-icon><Tools /></el-icon><span>首页配置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/toSwiper"><el-icon><tools /></el-icon>轮播图配置</el-menu-item>
<!--              <el-menu-item index="/toRecommend"><el-icon><tools /></el-icon>推荐配置</el-menu-item>-->
<!--              <el-menu-item index="/toHot"><el-icon><tools /></el-icon>公告配置</el-menu-item>-->
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2" v-has-perm="'merchants'">
            <template #title>
              <el-icon><Ticket /></el-icon><span>商铺管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/toMerchant" v-has-perm="'merchant:list'"><el-icon><tools /></el-icon>商铺管理</el-menu-item>
              <el-menu-item index="/toMyMerchant" v-has-perm="'merchant:my'"><el-icon><tools /></el-icon>我的店铺</el-menu-item>
<!--              <el-menu-item index="/toInventory"><el-icon><tools /></el-icon>库存管理</el-menu-item>-->
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3" v-has-perm="'products'">
            <template #title>
              <el-icon><Goods /></el-icon><span>商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/toCategory" v-has-perm="'product:category'"><el-icon><tools /></el-icon>分类管理</el-menu-item>
              <el-menu-item index="/toProduct" v-has-perm="'product:list'"><el-icon><tools /></el-icon>商品管理</el-menu-item>
              <el-menu-item index="/toReviews" v-has-perm="'product:review'"><el-icon><tools /></el-icon>评价管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="4" v-has-perm="'orders'">
            <template #title>
              <el-icon><DocumentChecked /></el-icon><span>订单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/toOrder" v-has-perm="'order:list'"><el-icon><tools /></el-icon>订单列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="5" v-has-perm="'communitys'">
            <template #title>
              <el-icon><ChatLineRound /></el-icon><span>社区管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/toArticles" v-has-perm="'community:list'"><el-icon><tools /></el-icon>文章管理</el-menu-item>
              <el-menu-item index="/toLabel" v-has-perm="'community:tag'"><el-icon><tools /></el-icon>标签管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="6" v-has-perm="'users'">
            <template #title>
              <el-icon><User /></el-icon><span>用户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/toUsers" v-has-perm="'user:list'"><el-icon><tools /></el-icon>用户管理</el-menu-item>
              <el-menu-item index="/toRoles" v-has-perm="'role:list'"><el-icon><tools /></el-icon>角色管理</el-menu-item>
              <el-menu-item index="/toPermissions" v-has-perm="'permission:list'"><el-icon><tools /></el-icon>权限管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="7" v-has-perm="'feedbacks'">
            <template #title>
              <el-icon><Edit /></el-icon><span>反馈管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/toFeedback" v-has-perm="'feedback:list'"><el-icon><tools /></el-icon>反馈列表</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="8">
            <template #title>
              <el-icon><Setting /></el-icon><span>系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/profile"><el-icon><tools /></el-icon>个人信息</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>

      </el-aside>
      <el-container>
        <!-- 顶部信息栏 -->
        <el-header class="header">
          <el-radio-group v-model="layoutIsCollapse" style="float:left; margin-top: 10px;">
            <el-icon v-show="!layoutIsCollapse" @click="layoutIsCollapse=true" style="font-size:32px;"><Fold/></el-icon>
            <el-icon v-show="layoutIsCollapse" @click="layoutIsCollapse=false" style="font-size:32px;"><Expand/></el-icon>
          </el-radio-group>
          <el-row type="flex" justify="space-between" align="middle">
            <el-col :span="24" class="header-right">
              <el-dropdown class="avatar-box">
                <el-avatar :src="getImgUrl(userInfo.avatar)" />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="router.push({path:'/profile'})">个人中心</el-dropdown-item>
<!--                    <el-dropdown-item>设置</el-dropdown-item>-->
                    <el-dropdown-item divided @click="logout">注销</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <div class="userName">
                <span>{{ userInfo.name }}</span>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <!-- 内容区域 -->
        <el-main class="main-content">
          <router-view></router-view>
        </el-main>
        <!-- 底部信息 -->
        <el-footer class="footer">
          <div class="content has-text-centered">
            <p>&copy; Copyright © 2024-2026 小明. All rights reserved.</p>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router';

import {ElMessage} from 'element-plus';
import {ref} from "vue";
import {userLogout} from "../api/user";
import {sysStore} from "../stores/index.ts";
// import {useMenuInfoStore} from "../stores"
import {getImgUrl} from "../utils/common.ts";
import {User} from "@element-plus/icons-vue";
// import {MenuForm} from "../api/menu/types/menu.dto.ts";

const router = useRouter();
const appStore = sysStore();
const userInfo = appStore.getUser;
const layoutIsCollapse = ref(false);
const asideWidth = ref(200)
const isCollapse = ref(false)


// 菜单数据列表
// const menuItems = reactive<Array<MenuForm>>([]);
//菜单全局管理对象
// const menuStore = useMenuInfoStore();

// onMounted(async () => {
//   try {
//     const data = await menuStore.getMenu
//     menuItems.push(...data);
//     console.log("菜单数据", data);
//   } catch (error) {
//     console.error('Failed to fetch menu data:', error);
//   }
// });

const handleOpen = () => {
  if (isCollapse.value){
    isCollapse.value=false
    asideWidth.value=200
  }
}
const handleClose = () => {
  if (!isCollapse.value){
    isCollapse.value=true
    asideWidth.value=64
  }
}


// 退出登录
const logout = async() => {
  const res = await userLogout()
  if (res.code === 200) {
    localStorage.removeItem('AccessToken');
    localStorage.removeItem('RefreshToken');
    appStore.clearUser()
    router.push('/');
    ElMessage.success(res.message);
  } else {
    ElMessage.error('退出失败');
  }

};
</script>

<style scoped>
body,html {
  padding: 0;
  margin: 0;
}

.main-container {
  min-height: 100vh;
  background-color: #ffffff;
}

.my-aside-head {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.my-aside-head img {
  width: 40px;
  height: 40px;
  margin-right: 8px;
}

.my-aside-head span {
  font-size: 20px;
  color: #ffffff;
}

.el-menu-vertical {
  width: 200px;
  /*解决菜单栏边缘不对齐问题*/
  --el-menu-border-color:none
}

.header {
  background-color: #545c64;
  color: #ecf0f1;
  padding: 0 20px;
  height: 60px;
  line-height: 60px;
}

.name {
  color: #ecf0f1;
  font-size: 20px;
}

.header-right {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.userName {
  margin-right: 20px;
}

.avatar-box{
  display: flex;
}

.sidebar {
  background-color: #545c64;
  color: #ecf0f1;
  overflow-y: auto;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.main-content {
  background-color: #ecf0f1;
  margin: 0;
  padding: 0;
  height: calc(100vh - 60px); /* 计算内容区域的高度 */
  overflow-y: auto; /* 使内容区域可滚动 */
  box-sizing: border-box; /* 确保 padding 不影响高度计算 */
}

.footer {
  background-color: #545c64;
  color: #ecf0f1;
  padding: 10px 0;
  text-align: center;
}
</style>